<template>
    <div class="home-all-bestlocation">
        <p
            style="font-size: 14px;font-weight: 400;line-height: 20px;letter-spacing: 0.1px;color: #CAC4D0;margin-bottom: 24px;">
            Best Location
        </p>
        <div style="display: flex;justify-content: space-between;margin-bottom: 20px;" v-for="(item, index) in bestLocation"
            :key="index">
            <div style="display: flex;">
                <!-- <img class="location-img" :src="item.icon" alt=""> -->
                <img class="location-img" src="../../assets/imgs/icon/截屏2023-10-11 00.07 1.png" alt="">
                <p style="color: #fff;margin: 0 10px;font-size: 16px;font-weight: 400;">{{ item.name }}</p>
                <p style="font-size: 12px;color: #0FB051;" v-if="item.vip === 0">Free</p>
                <p style="font-size: 12px; color: #107DFB;" v-else>PREM</p>
            </div>
            <img class="location-icon" @click="logScope(index)" :src="collectionIcon(item.changeIcon)" alt="">
        </div>
    </div>
    <div class="home-all-allocation">
        <p
            style="font-size: 14px;font-weight: 400;line-height: 20px;letter-spacing: 0.1px;color: #CAC4D0;margin-bottom: 24px;">
            All Location</p>
        <div style="display: flex;justify-content: space-between;margin-bottom: 20px;" v-for="(item, index) in allLocation"
            :key="index">
            <div style="display: flex;">
                <!-- <img class="location-img" :src="item.icon" alt=""> -->
                <img class="location-img" src="../../assets/imgs/icon/截屏2023-10-11 00.07 1.png" alt="">
                <p style="color: #fff;margin: 0 10px;font-size: 16px;font-weight: 400;">{{ item.name }}</p>
                <p style="font-size: 12px;color: #0FB051;" v-if="item.vip === 0">Free</p>
                <p style="font-size: 12px; color: #107DFB;" v-else>PREM</p>
            </div>
            <img class="location-icon" @click="logScope(index)" :src="collectionIcon(item.changeIcon)" alt="">
        </div>
    </div>
</template>

<script setup>
import { vpnList } from '../../apis/vpn.js'
import { info } from '../../apis/user.js'
import { onMounted, ref } from 'vue'
import { location } from '../../utils/location.js'


const bestLocation = ref([])
const allLocation = ref([])
const userLocation = ref([])

onMounted(async () => {
    let freeArr = []
    let premArr = []
    let minLocation = 0
    let res = await vpnList()
    // 获取全部数据
    if (res.data.code === 0 && res.data.data.sub_type === 'streaming') {
        allLocation.value = res.data.data.list[0]?.items
    }
    // 获取个人信息
    let infoMessage = await info()
    if (infoMessage.data.code === 0) {
        // 将个人信息的经纬度转换成数组  经度为数组的[0] 纬度为数组的[1]
        userLocation.value = infoMessage.data.data.loc.split(',')
        // 遍历全部数据将vip线路和非vip线路拆分
        allLocation.value.forEach(obj => {
            let option = ref({})
            if (obj.vip === 0) {
                option.value = obj
                option.value.changeIcon = 'star_border.png'
                freeArr.push(option)
            } else {
                option.value = obj
                option.value.changeIcon = 'star_border.png'
                premArr.push(option)
            }
        })
        // 计算最小距离
        calcMinlocation(freeArr)
        calcMinlocation(premArr)
        // 遍历全部数据寻找与两个最小值相等的属性并将找到的数据放入bestLocation
        allLocation.value.forEach(item => {
            if (calcMinlocation(freeArr) === location(Number(userLocation.value[0]), Number(userLocation.value[1]), Number(item.loc.split(',')[0]), Number(item.loc.split(',')[1]))) {
                item.minLocation = calcMinlocation(freeArr)
                bestLocation.value.push(item)
            }
            if (calcMinlocation(premArr) === location(Number(userLocation.value[0]), Number(userLocation.value[1]), Number(item.loc.split(',')[0]), Number(item.loc.split(',')[1]))) {
                item.minLocation = calcMinlocation(premArr)
                bestLocation.value.push(item)
            }
        })
        let arr1 = []
        let arr2 = []
        // bestLocation  free和prem各只保留一个
        bestLocation.value.forEach(item => {
            if (item.vip === 0) {
                arr1.push(item)
            } else {
                arr2.push(item)
            }
        })
        bestLocation.value = unique(arr1).concat(unique(arr2))
    }
})
// 动态src属性，找本地文件
const collectionIcon = (name) => {
    return new URL(`/src/assets/imgs/icon/${name}`, import.meta.url).href
}
// 对象数组去重
const unique = (arr) => {
    const res = new Map()
    return arr.filter((item) => !res.has(item.minLocation) && res.set(item.minLocation, 1))
}
// 根据经纬度计算最小距离
const calcMinlocation = (arr) => {
    let minLocation = 0
    if (arr.length) {
        for (let i = 0; i < arr.length; i++) {
            if (i === 0) {
                minLocation = location(Number(userLocation.value[0]), Number(userLocation.value[1]), Number(arr[i].value.loc.split(',')[0]), Number(arr[i].value.loc.split(',')[1]))
            } else {
                if (minLocation > location(Number(userLocation.value[0]), Number(userLocation.value[1]), Number(arr[i].value.loc.split(',')[0]), Number(arr[i].value.loc.split(',')[1]))) {
                    minLocation = location(Number(userLocation.value[0]), Number(userLocation.value[1]), Number(arr[i].value.loc.split(',')[0]), Number(arr[i].value.loc.split(',')[1]))
                }
            }
        }
    }
    return minLocation
}

const logScope = (index) => {
    if (allLocation.value[index].changeIcon === 'star.png') {
        allLocation.value[index].changeIcon = 'star_border.png'
    } else {
        allLocation.value[index].changeIcon = 'star.png'
    }
}
</script>

<style lang="scss" scoped>
.home-all-bestlocation {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.home-all-allocation {
    display: flex;
    flex-direction: column;
}

.location-img {
    width: 40px;
    height: 24px;
    border-radius: 4px;
}

.location-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
</style>